<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿爱奇艺轮播图</title>
	<link href="css/commons.css" rel="stylesheet" type="text/css" />
	<link href="css/index.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div id="box">
		<div id="pictures">
			<div class="pic"><img src="http://pic3.iqiyipic.com/common/lego/20190325/6f1e2d19f01548858896fd80f2778151.jpg"
					alt=""></div>
			<div class="pic"><img src="http://pic2.iqiyipic.com/common/lego/20190326/09d4397411e74d0aa859addf9154c130.jpg"
					alt=""></div>
			<div class="pic"><img src="http://pic0.iqiyipic.com/common/lego/20190325/af97c07e94c94885ad66caf8e6ec096e.jpg"
					alt=""></div>
			<div class="pic"><img src="http://pic2.iqiyipic.com/common/lego/20190324/3aca3ed1c6aa4cb78f05ff369d1e5056.jpg"
					alt=""></div>
			<div class="pic"><img src="http://pic2.iqiyipic.com/common/lego/20190324/328511c65f734edb8352c44fa2f7b938.jpg"
					alt=""></div>
			<div class="pic"><img src="http://pic2.iqiyipic.com/common/lego/20190325/fd166a510c614b3888e27e3b2cb0cd69.jpg"
					alt=""></div>
			<div class="pic"><img src="http://pic1.iqiyipic.com/common/lego/20190322/d8c2f08bbe584f47af11ff9764bd136a.jpg"
					alt=""></div>
			<div class="pic"><img src="http://pic0.iqiyipic.com/common/lego/20190326/42fd7d56b5ed49daadc30337ffc9b9f9.jpg"
					alt=""></div>
			<div class="pic"><img src="http://pic1.iqiyipic.com/common/lego/20190325/e04bb68c74ea47a98c2fa7c82f6f3918.jpg"
					alt=""></div>
			<div class="pic"><img src="http://pic2.iqiyipic.com/common/lego/20190323/8cdeae27607f420da99e438761c7f42a.jpg"
					alt=""></div>
		</div>
		<div id="nav_list">
			<ul id="lists">
				<!--<li class="lis bg"><a href="javascript:void(0)" class="tag">都挺好大结局:家庭纠葛皆释怀</a></li>-->
			</ul>
		</div>
	</div>

	<script src="js/jquery3.min.js"></script>
	<script>
		var i = 0; //定义图片数目
		var timer = null; //定义定时器
		$(function () {
			//ajax请求获取
			$.ajax({
				url: "js/movies.json",
				type: "get",
				async: false, //不设置此项会导致hover事件失效
				dataType: "json",
				success: function (data) {
					$.each(data.movies, function (index, item) {
						var td_data;
						td_data =
							"<li class='lis'>" + "<a href='javascript:void(0)' class='tag'>" + item.name + "</a>" +
							"</li>";
						$(".tag").parent().eq(0).addClass("bg");
						$("#box > #nav_list > #lists").append(td_data);
					});
				},
				error: function (err) {
					alert("ajax获取失败" + err);
				
				}
			});
			$(".pic").eq(0).show().siblings().hide(); //让图片的第一张显示,剩下的隐藏
			getTimer();
			$(".lis").hover(function () {
				//设置滑过li的样式
				$(".lis").css("cursor", "pointer");
				//通过li的下标获取到i
				i = $(".lis").index($(this));
				//调用显示方法
				show();
				//清除定时器
				clearInterval(timer);
			}, function () {
				//滑过之后再重新开启定时器
				getTimer();
			});
			//划过轮播图片定时器停止
			$("#pictures").hover(function () {
				//清除定时器
				clearInterval(timer);
			}, function () {
				//滑过之后再重新开启定时器
				getTimer();
			})
			//定时加载方法
			function getTimer() {
				timer = setInterval(() => {
					//执行下一张图片
					i++;
					//如果播放到最后一张,让他成为0
					if (i == 10) {
						i = 0;
					}
					show();
				}, 3000);
			}
			//轮播图循环显示方法
			function show() {
				//显示图片
				$(".pic").eq(i).stop(true, true).fadeIn(1000).siblings().stop(true, true).fadeOut(1000);
				//显示列表
				$(".tag").parent().eq(i).addClass("bg").siblings().removeClass("bg");
			}


		})
	</script>
</body>

</html>